<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree and cbtree/data File Store</title>

     <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../../dojox/grid/resources/claroGrid.css";
      @import "../../../cbtree/icons/fileIconsMS.css";
      @import "../../themes/claro/claro.css";

      html,body { height: 100%; margin: 0; overflow: hidden; padding: 0; }
      #appLayout { height: 100%; }
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: false,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dojox", location: "dojox" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script>
      require([ "dijit/layout/BorderContainer",
                "dijit/layout/TabContainer",
                "dijit/layout/ContentPane"
              ]);
    </script>

    <script type="text/javascript">
      require([ "dojo/_base/array",
                "dojo/_base/lang",
                "dojo/ready",
                "dojox/grid/DataGrid",
                "cbtree/Tree",                   // Checkbox Tree
                "cbtree/extensions/TreeStyling", // Tree Styling extensions
                "cbtree/models/FileStoreModel",  // Forest Store Model
                "cbtree/data/FileStore",         // File Store
                "cbtree/data/BreadCrumb"         // Breadcrumb trail
              ], function( array, lang, ready, DataGrid, Tree, TreeStyling,
                            FileStoreModel, FileStore, BreadCrumb ) {

          var queryOptions = { deep: true, storeOnly: true };
          var layoutFiles = [
             [
              { field: "name", name: "Filename", width: 20 },
              { field: "size", name: "File Size (bytes)", width: 10 },
              { field: "directory", name: "Is Directory", width: 10 },
              { field: "path", name: "Path", width: 'auto' }
              ]
          ];
          var store, model, trail, tree, grid;

          function pathToRegex( path ) {
            // summary:
            //    Convert a path string into a regular expression (not a pattern)...
            var segm  = path.split("/");
            var regex = "(^\\.";
            var i;

            for( i=0; i<segm.length; i++) {
              if (segm[i] !== ".") {
                regex = regex + "\\/" + segm[i];
              }
            }
            regex = regex + "\\/[^\\/]*$)"
            return regex;
          }

          function setQuery( path ) {
            // summary:
            //    Set and execute the new query string for the grid and update
            //    the breadcrumb trail.
            grid.setQuery( {path: pathToRegex(path)}, queryOptions );
            grid.selection.deselectAll();
            trail.setTrail( path );
          }

          function updateGrid( item ) {
            // summary:
            //    Update the grid with the new item data. If the item is currently
            //    not loaded in the store go load it first.
            if (!store.isItemLoaded(item)) {
              store.loadItem( { item: item,  onItem: updateGrid });
            } else {
              setQuery( store.getValue(item,"path") );
            }
          }

          function treeClicked( item, nodeWidget, evt ) {
            if (nodeWidget !== tree.rootNode) {
              updateGrid( item );
            } else {
              setQuery( "." );
            }
          }

          function gridClicked(rowIndex) {
            var item = grid.getItem(rowIndex);
            if (item.directory) {
              updateGrid(item);
            }
          }
          // Overwrite the store event handlers
          lang.extend( DataGrid, {
            _onDelete: function() {},
            _onNew: function() {},
            _onSet: function() {}
          });

          // First create the common store for the tree, grid and breadcrumb trail.
          store = new FileStore( {
                url: "../../store/server/PHP/cbtreeFileStore.php",
                cache: false,
                options:["iconClass"],
                basePath:"."
              });

          // Create the cbtree store model
          model = new FileStoreModel( {
                store: store,
                rootLabel: 'My Files',
                iconAttr: "icon",
                checkedRoot: true,
                checkedStrict: false,
                queryOptions: {ignoreCase:true},
                query: {directory:true},
                labelAttr: "name"
              });

          ready(function() {
            // summary:
            //    Callback when the DOM is ready and all modules have been resolved.

            // Create the breadcrumb trail.
            trail = new BreadCrumb( {store: store, cssBaseClass:"fileIcon"}, "BreadCrumbs");
            trail.on("click", updateGrid);

            // Create the tree
            tree = new Tree( { model: model, checkBoxes: false, persist: false, icon:"fileIcon" }, "CheckboxTree");
            tree.on("click", treeClicked);

            // Create the data grid...
            grid = new DataGrid( {
                  store: store,
                  structure:layoutFiles,
                  query: { path: pathToRegex(".") },
                  queryOptions: queryOptions,
                  sortFields: [{attribute:"directory", descending:true},{attribute:"name", ignoreCase:true}],
                  selectionMode:"multiple",
                  rowsPerPage:80
                }, "myGrid");

            grid.on( "selected", gridClicked);

            tree.startup();
            trail.startup();
            grid.startup();
          });

       });

    </script>
  </head>

  <body class="claro">
    <div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
      <div class="edgePanel edgeTop" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
        <div id="BreadCrumbs" class="breadCrumb" style="width: 100%; height:32px;">
        </div>
      </div>
      <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region: 'left', splitter: true" style="width:25%;">
        <div id="CheckboxTree">
        </div>
      </div>

      <div id="mainLevel" class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
        <div id="myGrid" style="width: 99%; height:500px;">
        </div>
      </div>
    </div>
  </body>
</html>
